import React, { PureComponent } from 'react'
import Table from '../base/base-table'
import Input from 'antd/lib/input'
import Icon from 'antd/lib/icon'
import { getOrderList, filterOrder } from '../../action/map.action'
import { connect } from 'react-redux'
import { millToString } from '../../util/util'
const Search = Input.Search

class OrderTable extends PureComponent {
    constructor () {
        super()
    }

    componentDidMount () {
        const {dispatch} = this.props
        dispatch(getOrderList())
    }

    shouldComponentUpdate (nextProps) {
        return nextProps.orderList !== this.props.orderList
    }

    filterData = (value) => {
        const {dispatch} = this.props
        dispatch(filterOrder({keyword: value}))
    }

    render () {
        const {clickToDetail, orderList} = this.props

        const columns = [
            {
                title: '合同号',
                dataIndex: 'orderNo',
                key: 'orderNo',
                width: '15%',
                onCellClick: clickToDetail,
                className: 'go-down'
            }, {
                title: '项目名称',
                dataIndex: 'projectName',
                width: '20%',

                key: 'projectName',
            }, {
                title: '备货完成时间',
                dataIndex: 'stockFinishTime',
                key: 'stockFinishTime',
                width: '15%',

                render: val => millToString(val)
            },
            {
                title: '订单状态',
                dataIndex: 'status',
                key: 'status',
                width: '10%',

            },
            {
                title: '客户名称',
                dataIndex: 'customerName',
                key: 'customerName',
                width: '20%',

            },
            {
                title: '办事处',
                dataIndex: 'office',
                key: 'office',
                width: '7%',
                render: (value) => value !== 'None' && value
            }

        ]

        return (
            <div className="order-table-container">
                <Search style={{width: '20rem', marginBottom: '1rem'}} placeholder="请输入项目名称"
                        onSearch={this.filterData}/>
                <div className="order-table-box">
                    <Table columns={columns} dataSource={orderList.toJS()} pagination={{pageSize: 15}}/>
                </div>
            </div>
        )
    }

}

function mapStateToProps ({orderList}) {
    return {orderList}
}

export default connect(mapStateToProps)(OrderTable)